<template>
    <div class="title-box">
        <el-card class="title-card" shadow="never">
            <div class="item-box item-title">
                <span>活码标题：</span>
                <span>{{ title.activity_name }}</span>
            </div>
            <div class="item-box">
                <span>创建人：</span>
                <span>{{ title.created_user }}</span>
            </div>
            <div class="item-box">
                <span>创建时间：</span>
                <span>{{ title.created_at }}</span>
            </div>
            <div class="item-box">
                <span>状态：</span>
                <span>{{ title.status_name }}</span>
            </div>
            <div class="item-box">
                <span>提前结束时间：</span>
                <span>{{ title.real_end_date ? title.real_end_date : '--' }}</span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
defineProps(['title']);
</script>

<style lang="scss" scoped>
.title-box {
    .countTime {
        text-align: right;
        font-size: 16px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #999;
        margin-bottom: 16px;
    }

    .title-card {
        :deep(.el-card__body) {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-row-gap: 16px;
            padding: 24px 30px;

            .item-box {
                line-height: 24px;
                font-size: 16px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #33302d;
            }

            .item-title {
                margin-right: 15px;
            }
        }
    }
}
</style>
